<template>
  <div class="system-role-container layout-padding">
    <div class="system-role-padding layout-padding-auto layout-padding-view">
      <div class="m-header">
        <div class="pro-name">
          <!-- <el-input
              clearable
              size="small"
              placeholder="请输入问题描述关键字"
              v-model="proName"
              :suffix-icon="Search"
            /> -->
        </div>

        <div style="display: flex; align-items: center">
          <!-- <el-button
              size="small"
              @click='exportExcel()'
              :icon="Upload"
              type="success"
              >导出
              </el-button> -->
          <el-button
            size="small"
            @click="newPerson"
            :icon="CirclePlus"
            type="primary"
            >导出设计产品档案表
          </el-button>
        </div>
      </div>

      <div v-loading='loadingTable' class="table_content">
        <el-table
        
          size="small"
          ref="table_s_exp"
          :height="activeHeight"
          style="width: 100%"
          :header-cell-style="{ background: '#fafbfc', color: '#333333' }"
          :data="tableDataPro"
        >
          <el-table-column
            type="index"
            width="70"
            label="序号"
            align="center"
          />

          <el-table-column
            width="140"
            show-overflow-tooltip
            label="设备名称"
            prop="equip_name"
          >
            <template #header>
              <div style="display: flex; align-items: center">
                <div style="margin-right: 5px">设备名称</div>
                <el-popover :width="190" trigger="hover">
                  <template #reference>
                    <div
                      class="icone"
                      :class="equip_name_s.length == 0 ? '' : 'active'"
                    >
                      <el-icon>
                        <Filter />
                      </el-icon>
                    </div>
                  </template>
                  <el-select-v2
                    :teleported="false"
                    size="small"
                    style="width: 180px; margin-right: 10px; z-index: 2000"
                    clearable
                    filterable
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    :options="equip_name_s_o"
                    v-model="equip_name_s"
                    placeholder="请输入"
                  >
                  </el-select-v2>
                </el-popover>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            width="100"
            show-overflow-tooltip
            label="位号"
            prop="equip_no"
          >
            <template #header>
              <div style="display: flex; align-items: center">
                <div style="margin-right: 5px">位号</div>
                <el-popover :width="200" trigger="hover">
                  <template #reference>
                    <div
                      class="icone"
                      :class="equip_no_s.length == 0 ? '' : 'active'"
                    >
                      <el-icon>
                        <Filter />
                      </el-icon>
                    </div>
                  </template>
                  <el-select-v2
                    :teleported="false"
                    size="small"
                    style="width: 180px; margin-right: 10px; z-index: 2000"
                    clearable
                    filterable
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    :options="equip_no_s_o"
                    v-model="equip_no_s"
                    placeholder="请输入"
                  >
                  </el-select-v2>
                </el-popover>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            width="110"
            show-overflow-tooltip
            label="图号"
            prop="equip_dwg_no"
          >
            <template #header>
              <div style="display: flex; align-items: center">
                <div style="margin-right: 5px">图号</div>
                <el-popover :width="200" trigger="hover">
                  <template #reference>
                    <div
                      class="icone"
                      :class="equip_dwg_no_s.length == 0 ? '' : 'active'"
                    >
                      <el-icon>
                        <Filter />
                      </el-icon>
                    </div>
                  </template>
                  <el-select-v2
                    :teleported="false"
                    size="small"
                    style="width: 180px; margin-right: 10px; z-index: 2000"
                    clearable
                    filterable
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    :options="equip_dwg_no_s_o"
                    v-model="equip_dwg_no_s"
                    placeholder="请输入"
                  >
                  </el-select-v2>
                </el-popover>
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" label="尺寸(mm)">
            <el-table-column
              sortable
              width="100"
              show-overflow-tooltip
              label="直径"
              align="center"
              prop="nominal_diam"
            ></el-table-column>
            <el-table-column
              sortable
              width="70"
              show-overflow-tooltip
              label="切高"
              align="center"
              prop="TL_to_TL"
            ></el-table-column>
          </el-table-column>
          <el-table-column
            width="90"
            show-overflow-tooltip
            label="容器类别"
            align="center"
            prop="vessel_type"
          >
            <template #header>
              <div style="display: flex; align-items: center">
                <div style="margin-right: 5px">容器类别</div>
                <el-popover :width="200" trigger="hover">
                  <template #reference>
                    <div
                      class="icone"
                      :class="vesseltype_s.length == 0 ? '' : 'active'"
                    >
                      <el-icon>
                        <Filter />
                      </el-icon>
                    </div>
                  </template>
                  <el-select-v2
                    :teleported="false"
                    size="small"
                    style="width: 180px; margin-right: 10px; z-index: 2000"
                    clearable
                    filterable
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    :options="vesseltype_s_o"
                    v-model="vesseltype_s"
                    placeholder="请输入"
                  >
                  </el-select-v2>
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            width="70"
            show-overflow-tooltip
            label="台数"
            align="center"
            prop="equip_count"
          ></el-table-column>

          <el-table-column align="center" label="设计参数">
            <el-table-column
              sortable
              width="180"
              show-overflow-tooltip
              label="压力MPa"
              align="center"
              prop="design_pressure"
            ></el-table-column>
            <el-table-column
              sortable
              width="180"
              show-overflow-tooltip
              label="温度℃"
              align="center"
              prop="design_temperature"
            ></el-table-column>
            <el-table-column
              width="180"
              show-overflow-tooltip
              label="介质"
              prop="fluid_name"
            ></el-table-column>
          </el-table-column>
          <el-table-column
            width="180"
            show-overflow-tooltip
            label="主要材料"
            prop="material"
          ></el-table-column>

          <el-table-column
            width="90"
            show-overflow-tooltip
            label="设计人"
            align="center"
            prop="equip_designer"
          ></el-table-column>

          <el-table-column
            width="90"
            show-overflow-tooltip
            label="校核人"
            align="center"
            prop="equip_checker"
          ></el-table-column>

          <el-table-column
            width="90"
            show-overflow-tooltip
            label="审核人"
            align="center"
            prop="auditor"
          ></el-table-column>

          <el-table-column
            width="90"
            show-overflow-tooltip
            label="审定人"
            align="center"
            prop="approver"
          ></el-table-column>

          <el-table-column align="center" label="设备质量Kg">
            <el-table-column
              sortable
              width="70"
              show-overflow-tooltip
              label="单"
              align="center"
              prop="equip_dry_weight"
            ></el-table-column>
            <el-table-column
              sortable
              width="70"
              show-overflow-tooltip
              label="总"
              align="center"
              prop="equip_total_weight"
            ></el-table-column>
          </el-table-column>

          <el-table-column
            width="100"
            sortable
            show-overflow-tooltip
            label="设计时间"
            prop="storage_time"
          ></el-table-column>

          <!-- <el-table-column
 
             show-overflow-tooltip
             label="错误类别"
             prop="error_type"
           >
           <template  #header>
            <div style="display: flex; align-items: center">
              <div style="margin-right: 5px">错误类别</div>
              <el-popover :width="200" trigger="hover">
                <template #reference>
                  <div
                    class="icone"
                    :class="error_type_s.length == 0 ? '' : 'active'"
                  >
                    <el-icon>
                      <Filter />
                    </el-icon>
                  </div>
                </template>
                <el-select-v2
                 
                  :teleported="false"
                  size="small"
                  style="width: 180px; margin-right: 10px; z-index: 2000"
                  clearable
                  filterable
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
                  :options="[
                {
                    value: '技术性错误',
                    label: '技术性错误',
                  },
                  {
                    value: '一般性错误',
                    label: '一般性错误',
                  },
                  {
                    value: '图面错误',
                    label: '图面错误',
                  },
              ]"
                  v-model="error_type_s"
                  placeholder="请输入"
                >
                </el-select-v2>
              </el-popover>
            </div>
          </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>

    <el-dialog
      draggable
      @close="addcCloseFrom(RefAdd)"
      title="导出档案表"
      v-model="addDio"
      width="25%"
    >
      <el-form
        ref="RefAdd"
        size="small"
        :model="addData"
        :rules="RulesEdit"
        label-width="120px"
      >
        <el-form-item label="选择时间范围：" prop="timeArr">
          <el-date-picker
          popper-class='DAtABLE'
            style="width: 100%"
            v-model="addData.timeArr"
            type="datetimerange"
            start-placeholder="选择开始时间"
            end-placeholder="选择结束时间"
            value-format="YYYY.MM.DD HH:mm:ss"
          
          />
        </el-form-item>

        <el-form-item>
          <div style="width: 100%; display: flex; flex-direction: row-reverse">
            <el-button @click="addDio = false">取 消</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-button type="primary" @click="handleCopyAdd(RefAdd)"
              >确 定</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
    
    <script setup name="systemRole">
import JSZipUtils from "jszip-utils";
import docxtemplater from "docxtemplater";
import { saveAs } from "file-saver";
import JSZip from "pizzip";
import ImageModule from "docxtemplater-image-module-free";
import { onMounted, ref, watch } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import {
  Close,
  Search,
  PictureFilled,
  CirclePlus,
  Upload,
  Download,
  Delete,
  Filter,
  Warning,
} from "@element-plus/icons-vue";
import { useProjectStore } from "../../stores/project";
import { storeToRefs } from "pinia";
import {
  DeleteDesignOptimizationScheme,
  GetDesignOptimizationSchemes,
  AddUpdateDesignOptimizationScheme,
} from "../../api/dept";
import PinYinMatch from "pinyin-match";
import {
  GetPressureVesselDesignProductRecord,
  ExportPressureVesselDesignProductRecord,
} from "../../api/technicalManagement";
let store = useProjectStore();

let equip_name_s = ref([]);
let equip_name_s_o = ref([]);
let equip_no_s = ref([]);
let equip_no_s_o = ref([]);
let equip_dwg_no_s = ref([]);
let equip_dwg_no_s_o = ref([]);
let vesseltype_s = ref([]);
let vesseltype_s_o = ref([]);

let list_filtered = ref([]);

let { projectInfo } = storeToRefs(store);

let proName = ref("");
let handleCopyAdd = async (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    console.log(addData.value);
    let res = await ExportPressureVesselDesignProductRecord({
      startTime: addData.value.timeArr[0],
      endTime: addData.value.timeArr[1],
    });
    let filename = res.headers; //下载后文件名
    let filename2 = ""; //下载后文件名
    filename = filename["content-disposition"];
    filename = window.decodeURI(filename);
    filename2 = filename.split(";")[1].split("filename*=UTF-8''")[1];
    filename = filename.split(";")[1].split("filename=")[1];
    const link = document.createElement("a"); // 创建a标签
    const blo = new Blob([res.data], { type: res.data.type }); // 设置下载格式
    link.style.display = "none";
    const url = window.URL.createObjectURL(blo);
    console.log(url);
    link.href = url;
    if (filename == undefined) {
      filename = filename2;
    }
    link.download = filename;

    // link.setAttribute('download', "fileName")3
    document.body.appendChild(link);
    link.click(); // 触发下载
    window.URL.revokeObjectURL(url); // 释放掉blob对象
    document.body.removeChild(link);
    addDio.value = false
    addcCloseFrom(formEl)
    ElMessage({
      message: "成功生成文件",
      type: "success",
    });
  });
};

let matchProfessional = (searchContent) => {
  if (searchContent) {
    let result = [];
    professional_leader_data_options.value.forEach((item) => {
      // matchResult 的值为 true/false
      let matchResult = PinYinMatch.match(item.label, searchContent);
      if (matchResult) {
        result.push(item);
      }
    });

    professional_leader_data_options_PY.value = result;
  } else {
    professional_leader_data_options_PY.value =
      professional_leader_data_options.value;
  }
};

let RefAdd = ref(null);
let addDio = ref(false);
let addData = ref({});
let editDio = ref(false);
let editData = ref({});
let RulesEdit = ref({
  timeArr: [{ required: true, message: "请选择", trigger: "change" }],
});
let editTable = (data) => {
  editData.value = { ...data };

  editDio.value = true;
};

let question_type_s = ref([]);
let error_type_s = ref([]);

let exportData = ref([]);

let addcCloseFrom = () => {
 
  RefAdd.value.resetFields();
};

let newPerson = () => {
  addDio.value = true;
};

let proj_name_data = ref([]);
let proj_name_data_options = ref([]);
let professional_leader_data = ref([]);
let professional_leader_data_options = ref([]);
let professional_leader_data_options_PY = ref([]);
let team_leader_data = ref([]);
let team_leader_options = ref([]);
let team_leader_options_PY = ref([]);

let work_major_ = ref([]);
let educational_ = ref([]);
let professional_post_ = ref([]);
let design_post_ = ref([]);
let qualification_ = ref([]);

let getProTable = async (
  data,
  { equip_name = [], equip_no = [], equip_dwg_no = [], vessel_type = [] }
) => {
  let res = await GetPressureVesselDesignProductRecord();
  equip_name_s_o.value = [...new Set(res.map((v) => v.equip_name))]
    .filter((v) => {
      if (v) {
        return v;
      }
    })
    .map((v) => {
      return {
        value: v,
        label: v,
      };
    });
  equip_no_s_o.value = [...new Set(res.map((v) => v.equip_no))]
    .filter((v) => {
      if (v) {
        return v;
      }
    })
    .map((v) => {
      return {
        value: v,
        label: v,
      };
    });
  equip_dwg_no_s_o.value = [...new Set(res.map((v) => v.equip_dwg_no))]
    .filter((v) => {
      if (v) {
        return v;
      }
    })
    .map((v) => {
      return {
        value: v,
        label: v,
      };
    });
  vesseltype_s_o.value = [...new Set(res.map((v) => v.vessel_type))]
    .filter((v) => {
      if (v) {
        return v;
      }
    })
    .map((v) => {
      return {
        value: v,
        label: v,
      };
    });

  let ORGdata = JSON.parse(JSON.stringify(res));

  const filters = {
    equip_name,
    equip_no,
    equip_dwg_no,
    vessel_type,
  };

  tableDataPro.value = multiFilter(
    JSON.parse(JSON.stringify(ORGdata)),
    filters
  );


  loadingTable.value = false
};

function multiFilter(array, filters) {
  const filterKeys = Object.keys(filters);

  return array.filter((item) => {
    return filterKeys.every((key) => {
      if (!filters[key].length) return true;
      return !!~filters[key].indexOf(item[key]);
    });
  });
}

let getOptionsData = (data, str) => {
  return [...new Set(data.map((v) => v[str]))]
    .filter((v) => {
      if (v) {
        return v;
      }
    })
    .map((v) => {
      return {
        value: v,
        label: v,
      };
    });
};

watch([equip_name_s, equip_no_s, equip_dwg_no_s, vesseltype_s], () => {
  getProTable(
    {},
    {
      equip_name: equip_name_s.value,
      equip_no: equip_no_s.value,
      equip_dwg_no: equip_dwg_no_s.value,
      vessel_type: vesseltype_s.value,
    }
  );
});

let personOptions = ref([]);

let tableDataPro = ref([]);
let loadingTable = ref(false)
watch(
  projectInfo,
  () => {
    if (projectInfo.value && Object.keys(projectInfo.value).length > 0) {
      loadingTable.value = true
      getProTable(
        {},
        {
          equip_name: equip_name_s.value,
          equip_no: equip_no_s.value,
          equip_dwg_no: equip_dwg_no_s.value,
          vessel_type: vesseltype_s.value,
        }
      );
    }
  },
  { immediate: true }
);

let activeHeight = ref(0);

// 页面加载时
onMounted(() => {
  activeHeight.value =
    document.querySelector(".system-role-padding").clientHeight - 80;
  window.addEventListener("resize", () => {
    activeHeight.value =
      document.querySelector(".system-role-padding").clientHeight - 80;
  });
});
</script>
    
    <style scoped lang="scss">
.m-header {
  display: flex;
  align-items: center;
}
.m-header .pro-name {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.m-header .el-input {
  width: 300px;
}
.m-header .el-button {
  margin-right: 10px;
}

.system-role-container {
  .system-role-padding {
    padding: 15px;
    .el-table {
      flex: 1;
    }
  }
}
.button_footer {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
}
.table_content {
  margin-top: 20px;
}

::v-deep(.el-table--large .el-table__cell) {
  padding: 6px 0;
}

.table_box {
  padding: 20px 50px;
}

.button_poastion_flex_iem {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.backgroun_border {
  // 	::v-deep .el-tabs__header {
  //     margin-top: 39px;
  //   }
}

::v-deep(.el-tabs__item::after) {
  position: absolute;
  content: " ";
  top: 0;
  width: 2px;
  height: 100%;
  background: #eee;
  right: 0;
}

.active {
  color: rgb(24, 144, 255);
}

.icone {
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep(.cell) {
  // display: flex;
  // align-items: center;
}

.active {
  color: rgb(24, 144, 255);
}

.icone {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
    